<template>
  <div class="w-full text-14px pb-80px">
    <div
      class="w-full h-186px px-20px pt-30px"
      style="
        background: linear-gradient(
          180deg,
          #649ef8 0%,
          #97d3ff 51%,
          #f1fdff 100%
        );
      "
    >
      <div class="flex items-center w-full">
        <div>
          <van-image
            width="50px"
            height="50px"
            fit="cover"
            round
            :src="Info.avatar ? Info.avatar : getImageurl('avatar.png')"
          />
        </div>
        <div class="ml-10px w-full">
          <div
            class="flex justify-between items-center relative w-full mb-10px"
          >
            <!-- <div class="max-w-140px truncate">
              {{ Info.name }} ({{ Info.mobile }})
            </div> -->
            <div class="flex items-center">{{ Info.shop_name }}</div>
            <div
              @click="copy(Info.no)"
              class="copy flex h-24px bg-[#FFFFFF] flex justify-center items-center rounded-5px px-5px ml-5px min-w-150px absolute right-0"
            >
              <div class="text-black text-10px">邀请码:{{ Info.no }}</div>
              <div class="">
                <van-image
                  width="14px"
                  height="14px"
                  class="ml-5px"
                  fit="contain"
                  :src="getImageurl('distribution/copy.png')"
                />
              </div>
            </div>
          </div>
          <div class="">{{ Info.name }} ({{ Info.mobile }})</div>
        </div>
      </div>
    </div>
    <div class="px-20px w-full">
      <div
        class="p-15px w-full rounded-10px bg-white mt-[-70px]"
        style="box-shadow: 0px 0px 4px 0px rgba(82, 139, 180, 0.4)"
      >
        <div class="pb-15px border-b flex justify-between">
          <div>我的奖金</div>
          <div
            class="w-74px h-24px flex justify-center items-center rounded-20px text-11px text-white bg-[#2E95FF]"
            @click="router.push('/index/distribution/withdrawal')"
          >
            奖金提现 >
          </div>
        </div>
        <div class="mt-10px flex justify-center">
          <div class="flex flex-col justify-center items-center">
            <div class="text-[#F9363C] text-24px">{{ Info.balance }}</div>
            <div class="mt-10px text-12px">可提现奖金（元）</div>
          </div>
          <div class="h-52px w-1px border-l mx-30px"></div>
          <div class="flex flex-col justify-center items-center">
            <div class="text-[#F9363C] text-24px">{{ Info.cash_price }}</div>
            <div class="mt-10px text-12px">已提现奖金（元）</div>
          </div>
        </div>
      </div>
      <div class="mt-15px flex flex-wrap justify-between">
        <div
          @click="router.push('/index/distribution/bonusDetail')"
          class="w-[48%] h-88px mb-10px relative"
          :style="{
            'background-image': `url(${getImageurl('distribution/tg1.png')})`,
            'background-size': 'cover',
          }"
        >
          <div class="absolute top-30px right-20px">
            <div class="text-12px font-bold">推广奖金</div>
            <div class="text-12px mt-10px">{{ Info.jjprice }}元</div>
          </div>
        </div>
        <div
          @click="router.push('/index/distribution/tgorder')"
          class="w-[48%] h-88px mb-10px relative"
          :style="{
            'background-image': `url(${getImageurl('distribution/tg2.png')})`,
            'background-size': 'cover',
          }"
        >
          <div class="absolute top-30px right-20px">
            <div class="text-12px font-bold">推广订单</div>
            <div class="text-12px mt-10px">{{ Info.order_num }}</div>
          </div>
        </div>
        <div
          @click="router.push('/index/distribution/withdrawalDetai')"
          class="w-[48%] h-88px mb-10px relative"
          :style="{
            'background-image': `url(${getImageurl('distribution/tg3.png')})`,
            'background-size': 'cover',
          }"
        >
          <div class="absolute top-30px right-20px">
            <div class="text-12px font-bold">提现明细</div>
            <div class="text-12px mt-10px">{{ Info.cash_num }}笔</div>
          </div>
        </div>
        <div
          @click="router.push('/index/distribution/fans')"
          class="w-[48%] h-88px mb-10px relative"
          :style="{
            'background-image': `url(${getImageurl('distribution/tg4.png')})`,
            'background-size': 'cover',
          }"
        >
          <div class="absolute top-30px right-20px">
            <div class="text-12px font-bold">我的粉丝</div>
            <div class="text-12px mt-10px">{{ Info.fans_num }}人</div>
          </div>
        </div>
      </div>
      <div
        class="mt-20px bg-white rounded-10px py-30px px-20px w-full"
        style="box-shadow: 0px 0px 4px 0px rgba(166, 166, 166, 0.4)"
      >
        <div
          class="flex justify-between items-center pb-10px border-b"
          @click="router.push('/index/distribution/yejiOrder')"
        >
          <div class="flex items-center">
            <div>
              <van-image
                width="24px"
                height="24px"
                fit="contain"
                :src="getImageurl('distribution/1.png')"
              />
            </div>
            <div class="ml-15px">业绩统计</div>
          </div>
          <div>
            <van-icon name="arrow" size="10" />
          </div>
        </div>
        <div
          class="flex justify-between items-center pb-10px border-b mt-15px"
          @click="router.push('/index/distribution/capitalDetail')"
        >
          <div class="flex items-center">
            <div>
              <van-image
                width="24px"
                height="24px"
                fit="contain"
                :src="getImageurl('distribution/2.png')"
              />
            </div>
            <div class="ml-15px">资金明细</div>
          </div>
          <div>
            <van-icon name="arrow" size="10" />
          </div>
        </div>
        <div
          class="flex justify-between items-center pb-10px border-b mt-15px"
          @click="router.push('/index/distribution/commissionDetail')"
        >
          <div class="flex items-center">
            <div>
              <van-image
                width="24px"
                height="24px"
                fit="contain"
                :src="getImageurl('distribution/3.png')"
              />
            </div>
            <div class="ml-15px">奖金明细</div>
          </div>
          <div>
            <van-icon name="arrow" size="10" />
          </div>
        </div>
        <div
          v-show="Info.is_shop"
          class="flex justify-between items-center pb-10px border-b mt-15px"
          @click="router.push('/index/shoping/shoping')"
        >
          <div class="flex items-center">
            <div>
              <van-image
                width="24px"
                height="24px"
                fit="contain"
                :src="getImageurl('distribution/4.png')"
              />
            </div>
            <div class="ml-15px">店操作</div>
          </div>
          <div>
            <van-icon name="arrow" size="10" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useRouter } from "vue-router";
import { billCenter } from "@/util/api";
import { showToast } from "vant";
import getImageurl from "@/util/getImageurl";
import h5Copy from "@/util/junyi-h5-copy";
const router = useRouter();
const Info = reactive({
  avatar: "", //头像
  is_shop: 0, //是不是店长1是0不是
  name: "", //姓名
  mobile: "", //手机号
  shop_name: "", //店铺名称
  balance: "", //可提现余额
  cash_price: 0, //已提现余额
  jjprice: 0, //奖金金额
  order_num: 0, //订单数量
  fans_num: 0, //粉丝数量
  cash_num: 0,
  no: "",
});
const getData = async () => {
  const res = await billCenter();
  for (let i in Info) {
    Info[i] = res.msg[i];
  }
  // console.log(Info);
};
getData();
const copy = (val) => {
  const res = h5Copy(val);
  if (res) {
    showToast("复制成功");
  } else {
    showToast("复制失败");
  }
};
</script>
<style scoped lang="scss"></style>
